<script setup lang="ts">
	import { ref } from 'vue'
	import { getGoodsListApi } from '@/api/goods'
	import type { goodsListItem } from '@/types/goods'
	// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
	import useZPagingComp from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPagingComp.js'
	import { fullUrl, computeConversion } from '@/utils/common'
	import { pageUrl } from '@/utils/constants'

	const paging = ref()
	const dataList = ref<goodsListItem[]>([])
	// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
	useZPaging(paging)

	const props = withDefaults(
		defineProps<{
			query ?: any
			safeAreaInsetBottom ?: boolean
			options ?: any
		}>(),
		{
			query: () => [],
			safeAreaInsetBottom: false,
		},
	)

	const query = ref(props.query)

	const queryList = (page : number, page_size : number) => {
		const params = {
			page,
			page_size,
			...query.value,
		}

		getGoodsListApi(params).then((res) => {
			paging.value.complete(res.result.data)
		})
	}

	const reload = () => {
		return paging.value.reload()
	}

	const refresh = () => {
		return paging.value.refresh()
	}

	const emits = defineEmits<{
		(e : 'refresher-status-changed', status : number) : void
	}>()

	const onRefresherStatusChange = (status : number) => {
		emits('refresher-status-changed', status)
	}

	defineExpose({ ...useZPagingComp(paging), reload, refresh })
</script>

<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :safe-area-inset-bottom="props.safeAreaInsetBottom"
		@refresherStatusChange="onRefresherStatusChange" v-bind="props.options" :paging-style="{
      backGroundColor: '#fff',
    }">
		<template #top>
			<slot name="top"></slot>
		</template>
		<slot name="middle"></slot>
		<uni-section title="商品列表" type="line" style="margin:10px 0;background-color: none;"></uni-section>
		<view class="list">
			<navigator class="list-item" v-for="item in dataList" :key="item.id"
				:url="`${pageUrl['goods-detail']}?id=${item.id}`">
				<image class="image" mode="scaleToFill" :src="fullUrl(item.images[0])"></image>
				<view class="list-item-detail">
					<view class="name"> {{ item.name }} </view>
					<view class="price">
						<text class="small">¥</text>
						<text class="price-now">{{ item.min_price }}</text>
						<text class="price-origin">{{ item.max_origin_price }}</text>
					</view>
					<view class="sale">
						<text>销量{{ computeConversion(item.total_sales) }}</text>
					</view>
				</view>
			</navigator>
		</view>
		<uni-section title="视频列表" type="line" style="margin:10px 0;background-color: none;"></uni-section>
		<view class="list">
			<navigator class="list-item" :url="pageUrl['goods-list-video']">
				<image class="image" mode="scaleToFill" src="../../static/images/logo.png"></image>
				<view class="list-item-detail">
					<view class="name">我的视频</view>
					<view class="price">
						<text class="small">¥</text>
						<text class="price-now">15</text>
						<text class="price-origin">21</text>
					</view>
					<view class="sale">
						<text>销量{{ computeConversion(112) }}</text>
					</view>
				</view>
			</navigator>
		</view>
	</z-paging>
</template>

<style lang="scss" scoped>
	:host {
		display: block;
	}

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 5rpx;

		.list-item {
			width: calc(50vw - 10rpx);
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #fff;
		}

		.list-item-detail {
			padding: 10rpx 10rpx 20rpx;
		}

		.image {
			height: 320rpx;
			width: 100%;
		}

		.name {
			margin: 10rpx 0 10rpx;
			font-size: 26rpx;
			color: #262626;
			min-height: 70rpx;
			line-height: 1.4;
			max-height: calc(2 * 1.4 * 26rpx);
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			line-height: 1;
			padding-top: 4rpx;
			color: #cf4444;
			font-size: 26rpx;

			&-origin {
				font-size: 20rpx;
				color: #999;
				text-decoration: line-through;
				margin-left: 10rpx;
			}
		}

		.small {
			font-size: 80%;
		}

		.sale {
			display: flex;
			justify-content: flex-end;
			padding-top: 20rpx;
			font-size: 20rpx;
			color: #666666;
		}
	}
</style>